<template>
  <div class="dashboard-container">
    <div class="welcome-section">
      <h1>欢迎使用日常信息管理系统</h1>
      <p>这是一个综合性的个人信息管理平台，帮助您安全、便捷地管理个人信息</p>
    </div>
    
    <!-- 统计卡片 -->
    <el-row :gutter="20" class="stat-cards">
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-icon">
            <i class="el-icon-lock"></i>
          </div>
          <div class="stat-content">
            <div class="stat-title">账号密码</div>
            <div class="stat-value">{{ stats.accountCount || 0 }}</div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-icon">
            <i class="el-icon-notebook-1"></i>
          </div>
          <div class="stat-content">
            <div class="stat-title">笔记</div>
            <div class="stat-value">{{ stats.noteCount || 0 }}</div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-icon">
            <i class="el-icon-link"></i>
          </div>
          <div class="stat-content">
            <div class="stat-title">网络地址</div>
            <div class="stat-value">{{ stats.bookmarkCount || 0 }}</div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-icon">
            <i class="el-icon-star-on"></i>
          </div>
          <div class="stat-content">
            <div class="stat-title">收藏网址</div>
            <div class="stat-value">{{ stats.favoriteCount || 0 }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 统计图表 -->
    <el-row :gutter="20" class="chart-section">
      <el-col :xs="24" :sm="24" :md="12">
        <el-card shadow="hover" class="chart-card">
          <div slot="header">
            <span>收支统计</span>
            <el-radio-group v-model="financeChartType" size="mini" style="float: right">
              <el-radio-button label="month">月度</el-radio-button>
              <el-radio-button label="category">分类</el-radio-button>
            </el-radio-group>
          </div>
          <div v-if="financeChartType === 'month'" ref="financeMonthChart" class="chart"></div>
          <div v-else ref="financeCategoryChart" class="chart"></div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="24" :md="12">
        <el-card shadow="hover" class="chart-card">
          <div slot="header">
            <span>数据分布</span>
          </div>
          <div ref="dataDistributionChart" class="chart"></div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover" class="dashboard-card" @click.native="goToModule('/account')">
          <div class="card-icon">
            <i class="el-icon-lock"></i>
          </div>
          <div class="card-content">
            <h2>账号密码管理</h2>
            <p>安全存储您的账号密码信息</p>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover" class="dashboard-card" @click.native="goToModule('/finance')">
          <div class="card-icon">
            <i class="el-icon-money"></i>
          </div>
          <div class="card-content">
            <h2>收支记录管理</h2>
            <p>记录和分析您的收支情况</p>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover" class="dashboard-card" @click.native="goToModule('/note')">
          <div class="card-icon">
            <i class="el-icon-notebook-1"></i>
          </div>
          <div class="card-content">
            <h2>笔记管理</h2>
            <p>记录和整理您的日常笔记</p>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover" class="dashboard-card" @click.native="goToModule('/bookmark')">
          <div class="card-icon">
            <i class="el-icon-link"></i>
          </div>
          <div class="card-content">
            <h2>网络地址管理</h2>
            <p>收藏和整理您的网络地址</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" class="feature-section">
      <el-col :span="24">
        <h2 class="section-title">系统特点</h2>
      </el-col>
      
      <el-col :xs="24" :sm="12">
        <div class="feature-item">
          <i class="el-icon-lock"></i>
          <div class="feature-content">
            <h3>数据安全</h3>
            <p>采用加密技术保护您的敏感信息</p>
          </div>
        </div>
      </el-col>
      
      <el-col :xs="24" :sm="12">
        <div class="feature-item">
          <i class="el-icon-s-data"></i>
          <div class="feature-content">
            <h3>数据统计</h3>
            <p>提供收支统计和分析功能</p>
          </div>
        </div>
      </el-col>
      
      <el-col :xs="24" :sm="12">
        <div class="feature-item">
          <i class="el-icon-s-grid"></i>
          <div class="feature-content">
            <h3>分类管理</h3>
            <p>支持对各类信息进行分类管理</p>
          </div>
        </div>
      </el-col>
      
      <el-col :xs="24" :sm="12">
        <div class="feature-item">
          <i class="el-icon-search"></i>
          <div class="feature-content">
            <h3>快速查询</h3>
            <p>提供便捷的搜索和查询功能</p>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/pie'
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'
import { getDashboardStat } from '@/api/dashboard'
import { getFinanceStat, getFinanceStatByCategory } from '@/api/finance'

export default {
  name: 'Dashboard',
  data() {
    return {
      stats: {
        accountCount: 0,
        noteCount: 0,
        bookmarkCount: 0,
        favoriteCount: 0
      },
      financeStats: {
        monthIncome: 0,
        monthExpense: 0,
        monthlyData: []
      },
      financeChartType: 'month',
      financeMonthChart: null,
      financeCategoryChart: null,
      dataDistributionChart: null,
      categoryStats: []
    }
  },
  watch: {
    financeChartType(val) {
      this.$nextTick(() => {
        if (val === 'month') {
          this.initFinanceMonthChart()
        } else {
          this.initFinanceCategoryChart()
        }
      })
    }
  },
  mounted() {
    this.fetchStats()
    this.fetchFinanceStats()
    this.$nextTick(() => {
      this.initCharts()
      
      // 窗口大小变化时，重新调整图表大小
      window.addEventListener('resize', () => {
        this.financeMonthChart && this.financeMonthChart.resize()
        this.financeCategoryChart && this.financeCategoryChart.resize()
        this.dataDistributionChart && this.dataDistributionChart.resize()
      })
    })
  },
  beforeDestroy() {
    window.removeEventListener('resize', () => {})
    this.financeMonthChart && this.financeMonthChart.dispose()
    this.financeCategoryChart && this.financeCategoryChart.dispose()
    this.dataDistributionChart && this.dataDistributionChart.dispose()
  },
  methods: {
    goToModule(path) {
      this.$router.push(path)
    },
    // 获取统计数据
    fetchStats() {
      getDashboardStat()
        .then(response => {
          this.stats = response.data || this.stats
          this.initDataDistributionChart()
        })
        .catch(() => {
          // 如果后端接口不存在，使用模拟数据
          this.stats = {
            accountCount: 12,
            noteCount: 25,
            bookmarkCount: 38,
            favoriteCount: 15
          }
          this.initDataDistributionChart()
        })
    },
    // 获取财务统计数据
    fetchFinanceStats() {
      getFinanceStat()
        .then(response => {
          this.financeStats = response.data || this.financeStats
          this.initFinanceMonthChart()
        })
        .catch(() => {
          // 如果后端接口不存在，使用模拟数据
          this.financeStats = {
            monthIncome: 5000,
            monthExpense: 3500,
            monthlyData: [
              { month: '1月', income: 4500, expense: 3200 },
              { month: '2月', income: 5200, expense: 3800 },
              { month: '3月', income: 4800, expense: 3500 },
              { month: '4月', income: 5500, expense: 4000 },
              { month: '5月', income: 6000, expense: 4200 },
              { month: '6月', income: 5800, expense: 3900 }
            ]
          }
          this.initFinanceMonthChart()
        })
      
      getFinanceStatByCategory()
        .then(response => {
          this.categoryStats = response.data || []
        })
        .catch(() => {
          // 如果后端接口不存在，使用模拟数据
          this.categoryStats = [
            { category: '餐饮', amount: 1200 },
            { category: '交通', amount: 800 },
            { category: '购物', amount: 600 },
            { category: '娱乐', amount: 400 },
            { category: '其他', amount: 500 }
          ]
        })
    },
    // 初始化所有图表
    initCharts() {
      this.initFinanceMonthChart()
      this.initDataDistributionChart()
    },
    // 初始化财务月度图表
    initFinanceMonthChart() {
      if (this.financeMonthChart) {
        this.financeMonthChart.dispose()
      }
      
      this.financeMonthChart = echarts.init(this.$refs.financeMonthChart)
      
      const monthlyData = this.financeStats.monthlyData || []
      const months = monthlyData.map(item => item.month)
      const incomeData = monthlyData.map(item => item.income)
      const expenseData = monthlyData.map(item => item.expense)
      
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['收入', '支出']
        },
        xAxis: {
          type: 'category',
          data: months
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '收入',
            type: 'line',
            data: incomeData,
            itemStyle: {
              color: '#67C23A'
            }
          },
          {
            name: '支出',
            type: 'line',
            data: expenseData,
            itemStyle: {
              color: '#F56C6C'
            }
          }
        ]
      }
      
      this.financeMonthChart.setOption(option)
    },
    // 初始化财务分类图表
    initFinanceCategoryChart() {
      if (this.financeCategoryChart) {
        this.financeCategoryChart.dispose()
      }
      
      this.financeCategoryChart = echarts.init(this.$refs.financeCategoryChart)
      
      const pieData = this.categoryStats.map(item => ({
        name: item.category,
        value: item.amount
      }))
      
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          right: 10,
          top: 'center',
          data: pieData.map(item => item.name)
        },
        series: [
          {
            name: '支出分类',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '16',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: pieData
          }
        ]
      }
      
      this.financeCategoryChart.setOption(option)
    },
    // 初始化数据分布图表
    initDataDistributionChart() {
      if (this.dataDistributionChart) {
        this.dataDistributionChart.dispose()
      }
      
      this.dataDistributionChart = echarts.init(this.$refs.dataDistributionChart)
      
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          right: 10,
          top: 'center',
          data: ['账号密码', '笔记', '网络地址', '收藏网址']
        },
        series: [
          {
            name: '数据分布',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '16',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { name: '账号密码', value: this.stats.accountCount },
              { name: '笔记', value: this.stats.noteCount },
              { name: '网络地址', value: this.stats.bookmarkCount },
              { name: '收藏网址', value: this.stats.favoriteCount }
            ]
          }
        ]
      }
      
      this.dataDistributionChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;
  
  .welcome-section {
    text-align: center;
    margin-bottom: 30px;
    
    h1 {
      font-size: 28px;
      color: #303133;
      margin-bottom: 10px;
    }
    
    p {
      font-size: 16px;
      color: #606266;
    }
  }
  
  .stat-cards {
    margin-bottom: 20px;
    
    .stat-card {
      height: 100px;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      
      .stat-icon {
        font-size: 40px;
        color: #409EFF;
        margin-right: 15px;
        margin-left: 10px;
      }
      
      .stat-content {
        .stat-title {
          font-size: 14px;
          color: #909399;
        }
        
        .stat-value {
          font-size: 24px;
          font-weight: bold;
          color: #303133;
        }
      }
    }
  }
  
  .chart-section {
    margin-bottom: 30px;
    
    .chart-card {
      margin-bottom: 20px;
      
      .chart {
        height: 300px;
      }
    }
  }
  
  .dashboard-card {
    height: 180px;
    margin-bottom: 20px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
    
    .card-icon {
      font-size: 50px;
      margin-bottom: 15px;
      color: #409EFF;
    }
    
    .card-content {
      text-align: center;
      
      h2 {
        font-size: 18px;
        margin-bottom: 5px;
      }
      
      p {
        font-size: 14px;
        color: #909399;
        margin: 0;
      }
    }
  }
  
  .feature-section {
    margin-top: 20px;
    
    .section-title {
      font-size: 22px;
      margin-bottom: 20px;
      text-align: center;
    }
    
    .feature-item {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      
      i {
        font-size: 36px;
        color: #409EFF;
        margin-right: 15px;
      }
      
      .feature-content {
        h3 {
          font-size: 16px;
          margin: 0 0 5px 0;
        }
        
        p {
          font-size: 14px;
          color: #606266;
          margin: 0;
        }
      }
    }
  }
}
</style> 